<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>    	
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<script type="text/javascript" src="mapwrapper.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ovi Maps Rendering API example</title>
    </head>
    <body onload="init();">
    
        <script type="text/javascript">  
			// Helper function to show/hide progress indication         			
			var appStatus = {
				busy: function(){
					mwl.hide('#container');
					mwl.show('#progress');
				},
				ready: function(){
					mwl.hide('#progress');
					mwl.show('#container');
				}
			}
            
            // This is called when the page is loaded
            function init() {				
				// Check if the device supports HTML5 geolocation
                if (!(navigator && navigator.geolocation)) {
					// If geolocation is not supported, use default coordinates
                    setMap({ coords : { latitude : "61.4988", longitude : "23.7637" }});									
                } 
				
				else {
					// If geolocation is supported, use the provided location
					// if the location request fails, call error callback
                    navigator.geolocation.getCurrentPosition(setMap, function (error) {		
								// Replace "loading" text with the error message 
				                var target = document.getElementById("container");
				                target.innerHTML = error.message;	
								appStatus.ready();
				            }
					);						
                }				
            }
            
			// Function to update map to DOM (id: container) background			
            function setMap(position) {
                
                var target = document.getElementById("container");	
                
				// Set CSS background image by using OviMap class
				// Note the use of getCSSUrl() to get formatted url for use in CSS
                target.style.backgroundImage = new OviMap({
                    center : { lat : position.coords.latitude , lon : position.coords.longitude }, 
                    zoom : 12, 
                    size : { width : 220, height : 220 } 
                }).getCSSUrl();
                			
				appStatus.ready();                
            }
      				   
			function Chicago(){
				setMap({ coords : { latitude : "41.865", longitude : "-87.6343" }});
			}
			function Beijing(){
				setMap({ coords : { latitude : "39.90747", longitude : "116.38982" }});			
			}
        </script>
		
		<!-- Container DOM -->
        <div id="container"></div>
		
		<!-- Progress indicator -->
		<div id="progress">Working...</div>
		
		<!-- Buttons for setting a new location -->
		<!-- Event handlers show the progress indicator and issue a 'showMap' request -->
		<div class="navi">
			<button
							onclick="mwl.show('#progress');
										mwl.hide('#container');
										Beijing();">Beijing
			</button>
			<button class="right"
							onclick="mwl.show('#progress');
										mwl.hide('#container');
										Chicago();">Chicago
			</button>
		</div>		
    </body>
</html>
